@base-color: #40B3C5;
.main-color{
  color: @base-color;
}
.color-black{
  color: #666;
}
.color-white{
  color: #fff;
}
.relative{
  position: relative;
}
.absolute{
  position: absolute;
}
.header{
  height: 40px;
  border-bottom:1px solid #ddd ;
  line-height: 40px;
  background-color: #f5f5f5;


}
.header .pull-left{
  position: fixed;
  height: 40px;
  width: 15%;
  text-align: center;
  color: #fff;
  background-color: @base-color;
}
.pull-right img{
  border: 1px solid @base-color;
}
.header .pull-right span{
  margin:0 30px 0 10px;
}
.main{
  // position: fixed;
  // top: 0;
  // left: 0;
  // right: 0;
  // bottom: 0;
  background-color: #e5e5e5;
  z-index: -1;
}
.main .pull-left{
  position: fixed;
  top: 40px;
  width: 15%;
  background: @base-color;
  height: 100%;

}
.main>.pull-right{
  width: 85%;
  margin-top: 10px;
  min-height: calc(100vh - 50px);
  background-color: #f5f5f5;
  
}
hr{
  margin: 0;
}
ul{
  width: 100%;
  margin-top: 20px;
  li{
    cursor: pointer;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    color: #fff;
    span:first-of-type{
      margin-right: 10px;
    }
    span:last-of-type{
      font-size: 10px;
      opacity: 0.8;
      float: right;
      line-height: 40px;
    }
    &.active{
      background-color: #fff;
      color: @base-color;
    }
  }
}
.content{
  padding: 40px;
  display: none;
  
  &.active{
    display: block;
  }
  form{
    margin-top: 25px;
  }
  table{
    margin-top: 30px;
  }
  &.type{

    .add,.change{
      display: none;
      padding: 20px 60px;
      color: #fff;
      position: fixed;
      width: 60%;
      height: 40%;
      left: 50%;
      top: 40%;
      transform: translate(-50%,-50%);
      background-color: rgba(64,179,197,0.7);
      h4{
        padding-top: 20px;
        padding-bottom: 40px;
      }
      &>.pull-right{
        // padding: 20px;
        font-size: 30px;
      }
      div{
        margin-top: 60px;
      }
      
    }
  }
  &.scenicSpot{
    .add,.change{
      overflow: scroll;
      display: none;
      padding: 20px 60px;
      color: #fff;
      position: fixed;
      width: 80%;
      height: 800px;
      left: 50%;
      top: 1%;
      box-shadow: 0px 0px 10px #ccc;
      transform: translateX(-50%);
      background-color: @base-color;

      &>.pull-right{
        font-size: 30px;
      }
      button{
        right: 20px;
        bottom: -70px;
      }
      .img{
        margin-top: 10px;
      }
    }
  }
  &.tour{
    .add,.change{
      display: none;
      padding: 20px 60px;
      color: #fff;
      position: fixed;
      width: 65%;
      height: 500px;
      left: 50%;
      top: 15%;
      box-shadow: 0px 0px 10px #ccc;
      transform: translateX(-50%);
      background-color: @base-color;

      &>.pull-right{
        font-size: 30px;
      }
      button{
        right: 20px;
        bottom: -90px;
      }
      .img{
        margin-top: 10px;
      }
    }
    
  }
  &.route{
    .add,.change{
      display: none;
      padding: 20px 60px;
      color: #fff;
      position: fixed;
      width: 65%;
      height: 800px;
      left: 50%;
      top: 2%;
      box-shadow: 0px 0px 10px #ccc;
      transform: translateX(-50%);
      background-color: @base-color;

      &>.pull-right{
        font-size: 30px;
      }
      button{
        right: 20px;
        bottom: -70px;
      }
      .img{
        margin-top: 10px;
      }
    }
    
  }

}

